import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_demo/utils/adapt.dart';
import 'package:flutter/gestures.dart';

class LoginPageOfficial extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _LoginPageOfficialState();
  }
}

class _LoginPageOfficialState extends State<LoginPageOfficial> {
  Color _colorFocusUnable = const Color(0xFFC2C5CC);
  Color _colorFocusEnable = const Color(0xFFFF3D5B);
  Color _btnColorDisable = const Color(0xFFFFB1BD);
  bool _focusEnable = false;
  bool _isButtonEnable = false;
  Color _lineColor;

  double _topMargin = 766.5;

  FocusNode _accountFocusNode = FocusNode();
  TextEditingController _accountEditController = TextEditingController();
  TapGestureRecognizer _tapGestureRecognizer = TapGestureRecognizer();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _lineColor = _colorFocusUnable;
    _accountFocusNode.addListener(() {
      if (_accountFocusNode.hasFocus) {
        setState(() {
          _focusEnable = true;
          _lineColor = _colorFocusEnable;
        });
      } else {
        setState(() {
          _lineColor = _colorFocusUnable;
        });
      }
    });

    _accountEditController.addListener(() {
      print('输入内容发生变化${_accountEditController.text.length}');

      if (_accountEditController.text.length == 11) {
        setState(() {
          _isButtonEnable = true;
        });
      } else {
        setState(() {
          _isButtonEnable = false;
          if (_accountEditController.text.length > 0) {
            _topMargin = 80;
          } else {
            _topMargin = 766.5;
          }
        });
      }
    });

    _tapGestureRecognizer.onTap = () {
      print('被点中了');
    };
  }

  @override
  Widget build(BuildContext context) {
    ScreenAdapt.init(context);
    return Scaffold(
      body: ListView(
        children: <Widget>[
          SizedBox(height: ScreenAdapt.px(528)),
          Container(
              padding: EdgeInsets.only(
                  left: ScreenAdapt.px(289.5), right: ScreenAdapt.px(48)),
              child: TextField(
                  inputFormatters: [LengthLimitingTextInputFormatter(11)],
                  autofocus: _focusEnable,
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintStyle: TextStyle(
                        color: _colorFocusUnable, fontSize: ScreenAdapt.px(72)),
                    hintText: '请输入手机号',
                    suffixIcon: IconButton(
                        icon: Image(
                          image:
                              AssetImage('assets/images/ic_login_delete.png'),
                          width: ScreenAdapt.px(48),
                          height: ScreenAdapt.px(48),
                        ),
                        onPressed: () {
                          _accountEditController.text = '';
                        }),
                  ),
                  obscureText: false,
                  style: TextStyle(
                      fontSize: ScreenAdapt.px(72),
                      color: const Color(0xff242526)),
                  focusNode: _accountFocusNode,
                  controller: _accountEditController,
                  keyboardType: TextInputType.number)),
          Container(
            margin: EdgeInsets.only(
                top: ScreenAdapt.px(16),
                left: ScreenAdapt.px(48),
                right: ScreenAdapt.px(48)),
            height: ScreenAdapt.px(6),
            color: _lineColor,
          ),
//          _buildAccountTextField(),
          SizedBox(height: ScreenAdapt.px(_topMargin)),
          _buildBottomButton(),
          _buildAgreeProtocolText()
        ],
      ),
    );
  }

  //创建账户输入
  Widget _buildAccountTextField() {
    List<Widget> items = [];
    items.add(TextField(
        textAlign: TextAlign.center,
        inputFormatters: [LengthLimitingTextInputFormatter(11)],
        autofocus: _focusEnable,
        decoration: InputDecoration(
            hintText: '请输入手机号',
            hintStyle: TextStyle(
                color: Color(0xFFC2C5CC), fontSize: ScreenAdapt.px(72)),
            border: UnderlineInputBorder()),
        obscureText: false,
        style: TextStyle(
            fontSize: ScreenAdapt.px(72), color: const Color(0xff242526)),
        focusNode: _accountFocusNode,
        controller: _accountEditController,
        keyboardType: TextInputType.number));
    if (_focusEnable) {
      items.add(Positioned(
        right: 0,
        bottom: ScreenAdapt.px(16),
        child: IconButton(
            icon: Image(
              image: AssetImage('assets/images/ic_login_delete.png'),
              width: ScreenAdapt.px(48),
              height: ScreenAdapt.px(48),
            ),
            onPressed: () {
              _accountEditController.text = '';
            }),
      ));
    }
    return Container(
      padding:
          EdgeInsets.only(left: ScreenAdapt.px(48), right: ScreenAdapt.px(48)),
      child: Stack(
        children: items,
      ),
    );
  }

  //创建下方获取验证码按钮
  Widget _buildBottomButton() {
    return Center(
      child: RaisedButton(
        onPressed: _isButtonEnable ? () {} : null,
        child: Text('获取验证码',
            style:
                TextStyle(fontSize: ScreenAdapt.px(54), color: Colors.white)),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(ScreenAdapt.px(72))),
        padding: EdgeInsets.symmetric(
            horizontal: ScreenAdapt.px(105), vertical: ScreenAdapt.px(33)),
        color: _colorFocusEnable,
        disabledColor: _btnColorDisable,
        elevation: 2.0,
      ),
    );
  }

  //同意协议布局
  Widget _buildAgreeProtocolText() {
    return Container(
        margin: EdgeInsets.only(top: ScreenAdapt.px(48)),
        child: Center(
          child: Text.rich(TextSpan(children: [
            TextSpan(
                text: '点击登录代表您同意',
                style: TextStyle(
                    fontSize: ScreenAdapt.px(36), color: Color(0xFF85888C))),
            TextSpan(
              text: '<<A协议>>',
              style: TextStyle(
                  fontSize: ScreenAdapt.px(36), color: Color(0xFF6577FA)),
              recognizer: _tapGestureRecognizer,
            )
          ])),
        ));
  }

  @override
  void dispose() {
    super.dispose();
    _tapGestureRecognizer.dispose();
    _accountEditController.dispose();
    _accountFocusNode.dispose();
  }
}
